{{ define "content" }}

{{ if .entities }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>{{ i18n "Object ID" . }}</th>
                            <th>{{ i18n "Type" . }}</th>
                            <th>{{ i18n "Name" . }}</th>
                            <th>{{ i18n "State" . }}</th>
                            <th>{{ i18n "Actions" . }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ range $i, $entity := .entities }}
                        <tr>
                            <td>{{ $entity.ObjectID }}</td>
                            <td>{{ $entity.Type }}</td>
                            <td>{{ $entity.Name }}</td>
                            <td>{{ i18n $entity.State $ }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    {{ if eq $entity.Type "light" }}
                                    <a href="{{ $.Request.URL.Path }}?action=entity&object={{ $entity.ObjectID }}" class="btn btn-info btn-icon btn-xs">
                                        <i class="glyphicon glyphicon-eye-open" title="{{ i18n "Details" $ }}"></i>
                                    </a>
                                    {{ end }}

                                    {{ if or (eq $entity.Type "light") (eq $entity.Type "switch") }}
                                        {{ if eq $entity.State "on" }}
                                            <a href="{{ $.Request.URL.Path }}?action=state&object={{ $entity.ObjectID }}&state=0" class="btn btn-danger btn-icon btn-xs">
                                                <i class="glyphicon glyphicon-stop" title="{{ i18n "Switch off" $ }}"></i>
                                            </a>
                                        {{ else }}
                                            <a href="{{ $.Request.URL.Path }}?action=state&object={{ $entity.ObjectID }}&state=1" class="btn btn-danger btn-icon btn-xs">
                                                <i class="glyphicon glyphicon-play" title="{{ i18n "Turn on" $ }}"></i>
                                            </a>
                                        {{ end }}
                                    {{ end }}
                                </div>
                            </td>
                        </tr>
                        {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{{ end }}

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel{{ if eq .ota_running false }} collapsed{{ end }}">
            <div class="x_title">
                <h2>{{ i18n "OTA" . }}</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table class="table table-striped nowrap" style="width:100%">
                    <tbody>
                        <tr>
                            <th>{{ i18n "Status" . }}</th>
                            <td>{{ if .ota_running }}{{ i18n "running" . }}{{ else }}{{ i18n "ready" . }}{{ end }}</td>
                        </tr>
                        {{ if .ota_error }}
                        <tr>
                            <th>{{ i18n "Last error" . }}</th>
                            <td>{{ .ota_error }}</td>
                        </tr>
                        {{ end }}
                        <tr>
                            <th>{{ i18n "Progress" . }}</th>
                            <td>
                                <div class="progress" style="margin-bottom:0">
                                    <div class="progress-bar progress-bar-striped {{ if .ota_running }}progress-bar-info active{{ else }}progress-bar-danger{{ end}}" role="progressbar" aria-valuenow="{{ .ota_written }}" aria-valuemin="0" aria-valuemax="{{ .ota_total }}" style="width:{{ .ota_progress }}%">
                                        <span style="line-height:20px">
                                            {{ i18n "%d bytes of %d" . nil nil nil .ota_written .ota_total }}
                                        </span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {{ if .ota_checksum }}
                        <tr>
                            <th>{{ i18n "Checksum" . }}</th>
                            <td>{{ .ota_checksum }}</td>
                        </tr>
                        {{ end }}
                    </tbody>
                </table>

                {{ if eq .ota_running false }}
                <form class="form-horizontal form-label-left dropzone" role="form" method="post" id="ota" action="?action=ota" novalidate></form>
                {{ end }}
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/dropzonejs/css/dropzone.min.css" false) }}
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net/js/jquery.dataTables.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/dropzonejs/js/dropzone.min.js" false) }}
    <script type="application/javascript">
        $(document).ready(function () {
            Dropzone.options.ota = {
                parallelUploads: 1,
                paramName: "firmware",
                createImageThumbnails: false,
                acceptedFiles: "application/macbinary,.bin"
            };
        });
    </script>
{{ end }}
